<template>
  <div id="map"></div>
</template>

<script setup>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import Feature from "ol/Feature";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import LineString from "ol/geom/LineString";
import { fromLonLat } from "ol/proj";
import { Circle, Fill, Stroke, Style, Icon } from "ol/style";
import { onMounted } from "@vue/runtime-core";
import nansha_data from "@/components/openlayers/draw-feature/nansha_data";
import arrow_png from "./arrow2.png";

let map;
let offset = 0.01;

// 创建地图容器
function initMap() {
  map = new Map({
    target: "map",
    // 天地图
    layers: [
      new TileLayer({
        source: new XYZ({
          url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        }),
      }),
    ],
    // 南沙区中心点
    view: new View({
      center: fromLonLat([113.44, 22.73]),
      zoom: 10,
    }),
  });
}
// 绘制点要素
function addPoint() {
  const pointFeature = [];
  for (let i = 0; i <= nansha_data.junction_x.length - 1; i++) {
    pointFeature.push(
      new Feature({
        geometry: new Point(
          fromLonLat([nansha_data.junction_y[i], nansha_data.junction_x[i]])
        ),
        name: "Point",
      })
    );
  }

  // 创建矢量图层
  const vectorLayer = new VectorLayer({
    source: new VectorSource({
      features: pointFeature,
    }),
    style: new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: "rgba(255, 0, 0, 0.6)",
        }),
      }),
    }),
  });

  // 将矢量图层添加到地图上
  map.addLayer(vectorLayer);
}
// 绘制线要素
function addLine() {
  // 创建矢量图层
  const vectorLayer = new VectorLayer({
    source: new VectorSource({ wrapX: false }),
  });

  const lineFeature = [];
  for (let i = 0; i <= nansha_data.pipe_vertices.length - 1; i++) {
    let res = [];
    nansha_data.pipe_vertices[i].forEach((item) => {
      res.push(fromLonLat([item[1], item[0]]));
    });
    const feature = new Feature({
      geometry: new LineString(res),
      name: "Line",
    });
    feature.setStyle(styleFunc(feature));
    vectorLayer.getSource().addFeature(feature);
    lineFeature.push(feature);
  }

  // 将矢量图层添加到地图上
  map.addLayer(vectorLayer);

  function styleFunc(feat) {
    let styles = [];
    styles.push(
      new Style({
        stroke: new Stroke({
          color: "rgba(0, 0, 255, 0.6)",
          width: 10,
        }),
      })
    );
    const geometry = feat.get("geometry");
    if (geometry.getType().toLowerCase() === "linestring") {
      const coords = geometry.getCoordinates();
      const length = geometry.getLength();
      const res = map.getView().getResolution() * 80;
      const count = Math.ceil(length / res);
      // 添加间断点
      for (let i = 1; i < count; i++) {
        let frag = i / count + offset;
        if (frag > 1) frag -= 1;
        const point = geometry.getCoordinateAt(frag);
        const point0 = geometry.getCoordinateAt(frag + frag * 0.05);
        const angle =
          Math.atan2(point0[0] - point[0], point0[1] - point[1]) - Math.PI / 2;
        styles.push(
          new Style({
            geometry: new Point(point),
            image: new Icon({
              scale: 0.25,
              imgSize: [50, 50],
              rotation: angle,
              snapToPixel: true,
              src: arrow_png,
            }),
          })
        );
      }
    }
    return styles;
  }

  setInterval(() => {
    offset = offset + 0.03;
    //复位
    if (offset >= 1) offset = 0.01;
    lineFeature.forEach((featureLine) => {
      featureLine.setStyle(styleFunc(featureLine));
    });
  }, 100);
}

onMounted(() => {
  initMap();
  addLine();
  // addPoint();
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
